<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>操作元素</title>
    <style type="text/css">
        .buttons ,
        .wrapper {
            margin: 15px;
            border: 1px solid blue ;
        }

        .buttons {
            padding: 15px;
        }

        .wrapper>* {
            margin: 15px ;
            border: 2px solid green;
        }

        .middle>p {
            height: 30px ;
            line-height: 30px;
            margin: 0;
        }

        .middle>p:nth-child(2n+1) {
            background: #dfdfdf;
        }

        .middle>p:nth-child(2n) {
            background: #ffff00;
        }
    </style>
    <script type="text/javascript">
        const x = {
            append(){
                let s = document.querySelector( '.second' );
                // 创建新的元素
                let ne = document.createElement( 'p' );

                // Node.prototype.appendChild( ne )
                // s.appendChild( ne );

                ne.innerHTML = new Date().toISOString();
                // Element.prototype.append( ne );
                s.append( ne );
            },
            prepend(){
                let s = document.querySelector( '.second' );
                // 创建新的元素
                let ne = document.createElement( 'p' );

                // Node.prototype.insertBefore( ne , s.firstChild );
                // s.insertBefore( ne , s.firstChild );

                ne.innerHTML = new Date().toISOString();
                // Element.prototype.prepend( ne );
                s.prepend( ne );
            },
            before(){
                let s = document.querySelector( '.second' );
                // 创建新的元素
                let ne = document.createElement( 'p' );

                // Node.prototype.insertBefore( newNode , refNode );
                // s.parentNode.insertBefore( ne , s );

                ne.innerHTML = new Date().toISOString();
                // Element.prototype.before( ne );
                s.before( ne );
            },
            after(){
                let s = document.querySelector( '.second' );
                // 创建新的元素
                let ne = document.createElement( 'p' );

                // Node.prototype.insertBefore( newNode , refNode );
                // s.parentNode.insertBefore( ne , s.nextSibling );

                ne.innerHTML = new Date().toISOString();
                // Element.prototype.after( ne );
                s.after( ne );
            },
            remove(){
                const w = document.querySelector( '.second' );
                if( w ) {
                    // Node.protype.removeChild( node )
                    // w.parentNode.removeChild( w );

                    // Element.prototype.remove()
                    w.remove();
                }
            },
            replace(){
                const w = document.querySelector( '.second' );
                if( w ) {
                    let another = document.createElement( 'p' );
                    another.innerHTML = new Date().toISOString();

                    // Node.prototype.replaceChild( newNode , refNode )
                    // w.parentNode.replaceChild( another , w );

                    // Element.prototype.replaceWith( another )
                    w.replaceWith( another );
                }
            },
            replaceWaer(){
                const w = document.querySelector( '.second' );
                if( w ) {
                    let node = document.createElement( 'p' );
                    node.innerHTML = new Date().toISOString();

                    // Element.prototype.replaceChildren( node | DOMString )
                    // w.replaceChildren(); // 如无参数则表示清空w内部所有子元素
                    // w.replaceChildren( node ); // 用 node 替换w内部所有子元素
                    // w.replaceChildren( `${ new Date().toISOString() }` ); // 用 DOMString 替换所有子元素
                    w.replaceChildren( node , 'hello' ); // 用参数指定的node或DOMString替换所有子元素
                }
            }
        }
    </script>
</head>
<body>

    <div class="buttons">
        <button onclick="x.append()">append</button>
        <button onclick="x.prepend()">prepend</button>
        <button onclick="x.before()">before</button>
        <button onclick="x.after()">after</button>
        <button onclick="x.remove()">remove</button>
        <button onclick="x.replace()">replaceWith</button>
        <button onclick="x.replaceWaer()">replaceChildren</button>
    </div>

    <div class="wrapper">
        <div class="middle first">
            <p></p>
            <p></p>
            <p></p>
        </div>
        <div class="middle second">
            <p></p>
            <p></p>
            <p></p>
        </div>
        <div class="middle third">
            <p></p>
            <p></p>
            <p></p>
        </div>
    </div>
    
</body>
</html>